<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %>

<c:set var="title" value="商品管理"/>
<%@include file="common/adminHeader.jsp" %>
<c:set var="light" value="2"/>
<%@include file="common/adminNavigator.jsp" %>
<style>
    #tablelist span {
        height: 80px;
        line-height: 80px;
    }
    .img-rounded {
        border-radius: 6px;
        height: 63px;
    }
    #btnSearch {
        width: 53px;
        height: 31px;
    }
</style>
<div class="container" >
    <div class="right-top-box">
        <div class="btn bs-bars">
            <a class="btn-product" id="btn_add" title="添加">
                <i class="fa fa-plus fa-fw"></i>
            </a>
            <a class="btn-delete" id="btn_delete_ids" title="批量删除">
                <i class="fa fa-trash-o fa-fw"></i>
            </a>
        </div>
        <div class="row" id="tb">
            <div class="col-md-12">
                <form class="form-inline" id="resource-form">
                    <div class="group-inner">
                        <input type="text" class="form-control form-input" id="search-id" name="search-id"  placeholder="商品id">
                    </div>
                    <div class="group-inner">
                        <input type="text" class="form-control form-input" id="search-username" name="search-username" placeholder="名字">
                    </div>
                    <div class="group-inner">
                        <input type="text" class="form-control form-input" id="search-categoryId" name="search-categoryId" placeholder="分类id">
                    </div>
                    <a class="btn btn-info glyphicon glyphicon-search form-search group-inner fa-search fa fa-fw" id="btnSearch" >
                    </a>
                </form>
            </div>
        </div>
    </div>
    <table id="tablelist"></table>
    <script type="text/javascript" src="render/js/manager/common.js"></script>
    <script type="text/javascript" src="render/js/manager/productManager.js"></script>
</div>
<div class="modal fade" id="addOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="addroleLabel" data-backdrop="static" aria-hidden="false">
    <div class="modal-backdrop fade"></div>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="addroleLabel">修改商品</h4>
            </div>
            <div class="modal-body">
                <form id="addOrUpdateForm" class="form-horizontal form-label-left">
                    <div id="addOrUpdateForm_before">
                        <input type="hidden" name="id" value="">
                        <input type="text" class="form-control col-md-7 col-xs-12" name="detail" id="detail"/>
                        <div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">商品名称</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" class="form-control col-md-7 col-xs-12" id="name" name="name" placeholder="请输入商品名称">
                            </div>
                        </div>
                        <sec:authorize access="hasRole('ADMIN')">
                            <div class="item form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="shop_id">店铺id</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <c:if test="${!empty shops}">
                                        <select id="shop_id" name="shop_id" required="required" class="form-control">
                                            <c:forEach items="${shops}" var="shop">
                                                <option value="${shop.id}">${shop.shop_name}</option>
                                            </c:forEach>
                                        </select>
                                    </c:if>
                                </div>
                            </div>
                            <div class="item form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="category_id_next">分类id</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <c:if test="${!empty categories_three}">
                                        <select id="category_id_next" name="category_id_next" required="required" class="form-control">
                                            <option value="" selected disabled>请选择</option>
                                            <%--<c:forEach items="${shops}" var="shop">
                                                <option value="${shop.id}">${shop.shop_name}</option>
                                            </c:forEach>--%>
                                        </select>
                                    </c:if>
                                </div>
                            </div>
                            <script type="text/javascript">
                                $(function () {
                                    $("select[name='shop_id']").change(function () {
                                        var element = "category_id_next";
                                        getLevel2(this.value, element)
                                    });

                                    //后台获取的二级类别数据
                                    var number = ${categories_three.size()};

                                    var arr_id = new Array();
                                    var arr_shop_id = new Array();
                                    var arr_name = new Array();

                                    <c:forEach items="${categories_three}" var="category">
                                        arr_id.push("${category.id}");
                                        arr_shop_id.push("${category.shop_id}");
                                        arr_name.push("${category.name}");
                                    </c:forEach>

                                    //选择第一项
                                    function getLevel2(level1,element){
                                        var options="";
                                        //回填的二级类别值
                                        <%--var levell2=${categories.evel2}+"";--%>
                                        $("#"+element).empty();
                                        // options+="<option value=''>请选择</option>";
                                        //遍历二级类别数据，把parentId为level1的数据动态赋值到option中
                                        for(var i=0;i<number;i++){
                                            var id=arr_id[i];
                                            var shop_id=arr_shop_id[i];
                                            var name=arr_name[i];
                                            if(parseInt(shop_id) == parseInt(level1)){
                                                options+="<option selected='true' value="+id+">"+name+"</option>";
                                            }
                                        }
                                        $("#"+element).append(options);
                                    }
                                });
                            </script>
                        </sec:authorize>
                        <sec:authorize access="hasAnyRole('SHOP_ADMIN','SHOP_USER')">
                            <div class="item form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="category_id_next">分类id<span class="required">*</span></label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <c:if test="${!empty categories_three}">
                                        <select id="category_id_next" name="category_id_next" class="form-control">
<%--                                            <option value="" selected disabled>请选择</option>--%>
                                            <c:forEach items="${categories_three}" var="categories_Three">
                                                <option value="${categories_Three.id}">${categories_Three.name}</option>
                                            </c:forEach>
                                        </select>
                                    </c:if>
                                </div>
                            </div>
                        </sec:authorize>
                        <div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="subtitle">副标题</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" class="form-control col-md-7 col-xs-12" name="subtitle" id="subtitle" placeholder="请输入副标题">
                            </div>
                        </div>
                        <div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">产品主图</label>
                            <div class="col-md-6 col-sm-6 col-xs-12 img_wh">
                                <input type="file" class="form-control col-md-7 col-xs-12" name="main_image" id="main_image" placeholder="选择产品主图">
                                <span id="insert_img" class="insert_img">
                                <img src='' id='img_url' class='img-responsive img-rounded auto-shake' onclick='fn_browse();'>
                            </span>
                            </div>
                        </div>
                        <div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">主俯侧图</label>
                            <div class="col-md-6 col-sm-6 col-xs-12 img_wh">
                                <input type="file" class="form-control col-md-7 col-xs-12" name="image_left" id="image_left" placeholder="产品正视图">
                                <span id="insert_img_left" class="insert_img">
                                <img src='' id='img_left_url' class='img-responsive img-rounded auto-shake' onclick='javascript:fn_browse_left();'>
                            </span>
                                <input type="file" class="form-control col-md-7 col-xs-12" name="image_center" id="image_center" placeholder="产品俯视图">
                                <span id="insert_img_center" class="insert_img">
                                <img src='' id='img_center_url' class='img-responsive img-rounded auto-shake' onclick='javascript:fn_browse_center();'>
                            </span>
                                <input type="file" class="form-control col-md-7 col-xs-12" name="image_right" id="image_right" placeholder="产品侧面图">
                                <span id="insert_img_right" class="insert_img">
                                <img src='' id='img_right_url' class='img-responsive img-rounded auto-shake' onclick='javascript:fn_browse_right();'>
                            </span>
                            </div>
                        </div>
                        <%--<div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">商品介绍</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="button" class="form-control col-md-7 col-xs-12" id="detailBtn" value="编辑商品介绍"/>
                                <input type="text" class="form-control col-md-7 col-xs-12" name="detail" id="detail"/>
                            </div>
                        </div>--%>
                        <div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="price">价格</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="number" class="form-control col-md-7 col-xs-12" name="price" id="price" placeholder="请输入商品价格">
                            </div>
                        </div>
                        <div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="stock">库存数量</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="number" class="form-control col-md-7 col-xs-12" name="stock" id="stock" placeholder="请输入商品库存数量">
                            </div>
                        </div>
                        <div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="status">商品状态</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <select class="form-control" name="status" id="status">
                                    <%--<option value="1" selected disabled>请选择</option>--%>
                                    <option value="1">上架</option>
                                    <option value="0">下架</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="addOrUpdateForm_after" style="display: none;">
                        <div id="editor" class="product_editor" style="display: block;">
                            <p>请输入商品详情...</p>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default addOrUpdateBtn_close" data-dismiss="modal"><i class="fa fa-close">关闭</i></button>
                <button type="button" class="btn btn-success addOrUpdateBtn_next"><i class="fa fa-save">下一步</i></button>

                <button type="button" class="btn btn-success addOrUpdateBtn_before" style="display: none;"><i class="fa fa-save">上一步</i></button>
                <button type="button" class="btn btn-success addOrUpdateBtn"><i class="fa fa-save">保存</i></button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 下一步
    $(".addOrUpdateBtn_next").on('click', function () {
        $("#addOrUpdateForm_before").css("display","none");
        $("#addOrUpdateForm_after").css("display","");
        $(".addOrUpdateBtn_before").css("display","");
        $(".addOrUpdateBtn_next").css("display","none");
        // $(".addOrUpdateBtn").css("display","");
        $(".addOrUpdateBtn_close").css("display","none");
    });

    //上一步
    $(".addOrUpdateBtn_before").on('click', function () {
        $("#addOrUpdateForm_before").css("display","");
        $("#addOrUpdateForm_after").css("display","none");
        $(".addOrUpdateBtn_before").css("display","none");
        $(".addOrUpdateBtn_next").css("display","");
        // $(".addOrUpdateBtn").css("display","none");
        $(".addOrUpdateBtn_close").css("display","");
    });

    $("#main_image").change(function() {
        var file = $('#main_image')[0].files[0];
        var binaryData = [];
        binaryData.push(file);
        $("#img_url").attr("src", window.URL.createObjectURL(new Blob(binaryData,{type:"application/zip"})));
    });

    $("#image_left").change(function() {
        var file = $('#image_left')[0].files[0];
        var binaryData = [];
        binaryData.push(file);
        $("#img_left_url").attr("src", window.URL.createObjectURL(new Blob(binaryData,{type:"application/zip"})));
    });

    $("#image_center").change(function() {
        var file = $('#image_center')[0].files[0];
        var binaryData = [];
        binaryData.push(file);
        $("#img_center_url").attr("src", window.URL.createObjectURL(new Blob(binaryData,{type:"application/zip"})));
    });

    $("#image_right").change(function() {
        var file = $('#image_right')[0].files[0];
        var binaryData = [];
        binaryData.push(file);
        $("#img_right_url").attr("src", window.URL.createObjectURL(new Blob(binaryData,{type:"application/zip"})));
    });

    var E = window.wangEditor;
    var editor = new E('#editor');
    // 或者 var editor = new E( document.getElementById('editor') )
    // 自定义配置颜色（字体颜色、背景色）
    editor.customConfig.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf',
        '#c24f4a',
        '#8baa4a',
        '#7b5ba1',
        '#46acc8',
        '#f9963b',
        '#ffffff'
    ];

    // 自定义菜单配置
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ];

    // 自定义 onchange 触发的延迟时间，默认为 200 ms
    editor.customConfig.onchangeTimeout = 1000; // 单位 ms

    // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
    editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片

    editor.create();
    E.viewsource.init('#editor');
    E.fullscreen.init('#editor');

    /*$("#detailBtn").on("click",function () {
        var show = $('#editor').css('display');
        if ( show == 'block'){
            $('#editor').css('display','none');
            $("#detailBtn").val("编辑商品介绍");
        }
        if ( show == 'none'){
            $('#editor').css('display','block');
            $("#detailBtn").val("关闭商品介绍");
        }
    });*/

    function editorText() {
        return editor.txt.html();
    }

    function editorContent(content) {
        editor.txt.html(content);
    }

</script>
<%@include file="common/adminFooter.jsp" %>
